<template>
  <div class="fieldContent">
    <van-field v-model="valueData" autosize type="textarea"  :placeholder="$attrs.placeholder"
     :readonly="$store.state.mobile.userAgent==='mobile' || this.$store.state.mobile.isJump"
     :style="{'font-size': $attrs.fontSize,'font-weight' : $attrs.bold ? 'bold' : 'normal','font-style': $attrs.italic ? 'italic' : 'normal',
       'text-decoration': $attrs.underline ? 'underline' : 'none','--text-center': `${$attrs.textAlign}`,'--text-color': `${$attrs.backColor}`,'--line-height': `${$attrs.lineHeight}`}" 
     @input="change"
    />
  </div>
 </template>
 <script>
 export default {
   name:'VantField',
   props:['value'],
   data(){
     return {
       valueData: ''
     }
   },
  created(){
   this.valueData = this.value;
  },
   methods: {
     change(val) {
       this.$emit('input', val)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
   .fieldContent{
     height: 100%;
     overflow: hidden;
     padding-top:6px;
     ::v-deep .van-field__body{
       height:100%;
     }
     ::v-deep .van-field__control{
       text-align: var(--text-center);
       color: var(--text-color);
       line-height: var(--line-height);
       height:100% !important;
     }
     ::v-deep .van-cell{
       overflow: auto;
       padding: 5px;
       height:100%;
     }
     ::v-deep .van-cell__value{
       height:100%;
     }
   }
 </style>
 
